<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>weekBeyond-trend</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../css/bui.css">
		<script type="text/javascript" src="../script/api.js"></script>
		<script type="text/javascript" src="../script/zepto.js"></script>
		<script type="text/javascript" src="../script/doT.min.js"></script>
		<script type="text/javascript" src="../script/bui.js"></script>
		<style type="text/css">

		</style>
	</head>
<body style="background-color:#fff;">
	<div class="bui-page">
		<header class="bui-bar" id="header">
				<div class="bui-bar">
						<div class="bui-bar-left">
								<a class="bui-btn btn-back" tapmode onclick="my_close()"><i class="icon-back"></i></a>
						</div>
						<div class="bui-bar-main">排放监测趋势</div>
						<div class="bui-bar-right">
						</div>
				</div>
		</header>
		<div class="bui-page page-form">
		  <main class="solve-list">
			<ul class="bui-list">
				<h3 class="section-title">近一周超标趋势</h3>
				<li class="bui-btn bui-box clearactive">
					<canvas  class="span1" id="lampblackTrend"></canvas>
				</li>
			</ul>
		</main>
	</div>
	</div>
	<script type="text/javascript" src="../script/Chart.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript">

	var data = {};

	apiready = function(){
		var header = $api.byId('header');
    $api.fixIos7Bar(header);
		$api.fixStatusBar(header);
    api.setStatusBarStyle({
        style: 'light'
    });

		data = api.pageParam.data;

		renderChart(data);

	}

	var dataInfos = {
			datasets:[
				{
				  fillColor:"transparent",
					backgroundColor:"rgba(254,225,231,0.5)",//背景色
					borderColor:"#FC8BA3",//线条颜色
					pointRadius:0,//数据点大小
					pointHitRadius:0,
				}
			]
		};

	function renderChart(data){
		var labels = [];//横坐标数据
		var datas = [];//纵坐标数据
		for(var i=0;i<data.length;i++){
			labels.push(data[i].date.split(' ')[0]);
			datas.push(data[i].total);
		}
		dataInfos.labels = labels;
		dataInfos.datasets[0].data = datas;
		new Chart(document.getElementById('lampblackTrend').getContext("2d"),{
			type:'line',
			data:dataInfos,
			options:{
					legend:{
						display:false //屏蔽标题
					},
					responsive:true,
					tooltips:{
						mode:'single',
					},
					scales:{
						xAxes:[{
							borderColor:'transparent',
							ticks:{
								autoSkip:false,
								maxRotation:0,
							},
							gridLines:{
								isplay:false,
							},
						}],
						yAxes:[{
							gridLines:{
								display:true,
							},
						}]
					}
			}
		});

	}

	//返回
	function my_close() {
			api.closeWin();
	}

	</script>
</body>
</html>
